import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import '../css/my.css'
import instance from '../axios/index'
import { useDispatch } from 'react-redux';
import { modify } from '../redux/cartSlice'
import Address from '../components/Address'


export default function My() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const tiaozhuan = (strg) => {
    navigate('/Orders', { state: { strg } })
  } 
  const [useName, setUseName] = useState({})
  
  
  const yibuFetcher = async () => {
    const id = sessionStorage.getItem('id')
    const { data: { code, data } } = await instance({ url: `/my/getUseName?id=${id}` })
    if (code === 200) {
      setUseName(data)
      dispatch(modify(data))
    }
  }
  useEffect(() => {
    yibuFetcher()
  },[])


  const zhanhaoGuanli = () => {
    navigate('/guanli')
  }

  // const []
  return (
    <div>
      <div className="borderR">
        <div>
          <div style={{ textAlign: 'center' }}>
            <h1 className='writhColor'>我的</h1>
          </div>
          <div className='writhColor' style={{ paddingLeft: '20px', paddingRight: '20px', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex' }}>
              <div>
                <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src={useName.avater} alt="头像" />
              </div>
              <div style={{ marginTop: '10px', marginLeft: '20px' }}>
                <h2><img style={{display:useName.member?'inline-block':'none'}} src="/iconfont/my/会员.png" width={20}/> {useName.name}</h2>
                <div style={{ width: '100px', textAlign: 'center' }}>
                  总结分{useName.jifen}
                </div>
              </div>
            </div>
            <div>
              <p style={{ lineHeight: '400%' }} onClick={zhanhaoGuanli}>账号管理</p>
            </div>
          </div>
        </div>
        <div className='blockBut'  style={{display:!useName.member?'inline-block':'none'}}>
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px' }}>
            <p style={{ color: '#B47F12' }}>会员</p>
            <p style={{ color: '#A08E88' }}>升级会员享更多优惠</p>
            <p><button style={{ backgroundColor: '#FBD3AF', color: '#B47F12', border: 'none', width: '60px', borderRadius: '20px' }} onClick={()=>navigate('/member')}>详情</button></p>
          </div>
        </div>
      </div>
      <div className='Dingdan'>
        <div className='Dingdan_dan'>
          <div className='Dingdan_dan_title' onClick={() => tiaozhuan('全部')}>
            <img src='/iconfont/my/yingyong.png' width={40} />
            <p>全部订单</p>
          </div>
          <div className='Dingdan_dan_title' onClick={() => tiaozhuan('待付款')}>
            <img src='/iconfont/my/daitihuo.png' width={40} />
            <p>待付款</p>
          </div>
          <div className='Dingdan_dan_title' onClick={() => tiaozhuan('待提货')}>
            <img src='/iconfont/my/daifukuan.png' width={40} />
            <p>待提货</p>
          </div>
          <div className='Dingdan_dan_title' onClick={() => tiaozhuan('已提货')}>
            <img src='/iconfont/my/yitihuo.png' width={40} />
            <p>已提货</p>
          </div>
        </div>
      </div>
      <div style={{ height: '280px',marginTop:'5px'}}>
        <Address />
        <div className='shohoutishi'>
          <div>
            <img src='/iconfont/my/令牌.png' width={60} />
          </div>
          <div>
            <p style={{marginTop:'10px',lineHeight:'20px'}}>如果您购买的商品有任何问题，请直接与购买门店联系，门店会为您处理，让您售后无忧</p>
          </div>
        </div>
      </div>
      <div style={{ height: '100px', position: 'relative' }}>
        <button className='Gouwu writhColor' onClick={() => { navigate('/home') }}>去购物</button>
      </div>
    </div>
  );
}